---
title: Feedback
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

Indica progresso ou contagem regressiva e se move da direita para a esquerda.

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props             | Tipo                                     | Descrição                                                                                        | Padrão       |
| ----------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------ |
| duração           | número                                   | A duração total da animação da barra de progresso em milissegundos                               | 3            |
| atraso            | número                                   | O atraso no início da animação da barra de progresso em milissegundos                            | 0            |
| amortecimento     | Nome opcional para estilização adicional | Função de amortecimento para a animação da barra de progresso                                    | easeInOut    |
| altura da barra   | número                                   | A altura da barra em pixels                                                                      | 24           |
| cor da barra      | Nome opcional para estilização adicional | A cor da barra                                                                                   | gray80       |
| início automático | booleano                                 | Se `true`, a animação da barra de progresso começa automaticamente quando o componente é montado | `verdadeiro` |

</Tab>
</Tabs>

## Barra de Progresso Circular

Indica o progresso de uma tarefa, frequentemente usada em telas de carregamento ou em áreas onde você deseja comunicar processos em andamento ao usuário.

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| Props            | Tipo                                     | Descrição                                | Padrão       |
| ---------------- | ---------------------------------------- | ---------------------------------------- | ------------ |
| tamanho          | número                                   | O tamanho da barra de progresso circular | 50           |
| largura da barra | número                                   | A largura da linha da barra de progresso | 5            |
| cor da barra     | Nome opcional para estilização adicional | A cor da barra de progresso              | currentColor |

</Tab>

</Tabs>
